﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery/jquery.progressbar.js" type="text/javascript"
	charset="utf-8"></script>
<script src="js/jquery/jquery.asyncqueue.js" type="text/javascript"
	charset="utf-8"></script>

<script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
<script src="js/LineBreakMeasurer.js" type="text/javascript"
	charset="utf-8"></script>
<script src="js/ProcessDiagramGenerator.js" type="text/javascript"
	charset="utf-8"></script>
<script src="js/ProcessDiagramCanvas.js" type="text/javascript"
	charset="utf-8"></script>

<style type="text/css" media="screen">
</style>
</head>
<body>
	<div class="wrapper">
		<div id="pb1"></div>
		<div id="overlayBox">
			<div id="diagramBreadCrumbs" class="diagramBreadCrumbs"
				onmousedown="return false" onselectstart="return false"></div>
			<div id="diagramHolder" class="diagramHolder"></div>
			<div class="diagram-info" id="diagramInfo"></div>
		</div>
	</div>
	<script language='javascript'>
		var DiagramGenerator = {};
		var pb1;
		$(document)
				.ready(
						function() {
							var query_string = {};
							var query = window.location.search.substring(1);
							var vars = query.split("&");
							for (var i = 0; i < vars.length; i++) {
								var pair = vars[i].split("=");
								query_string[pair[0]] = pair[1];
							}

							var processDefinitionId = query_string["processDefinitionId"];
							var processInstanceId = query_string["processInstanceId"];

							console.log("Initialize progress bar");

							pb1 = new $.ProgressBar(
									{
										boundingBox : '#pb1',
										label : 'Progressbar!',
										on : {
											complete : function() {
												console
														.log("Progress Bar COMPLETE");
												this.set('label', 'complete!');
												if (processInstanceId) {
													ProcessDiagramGenerator
															.drawHighLights(processInstanceId);
												}
											},
											valueChange : function(e) {
												this.set('label', e.newVal
														+ '%');
											}
										},
										value : 0
									});
							console.log("Progress bar inited");

							ProcessDiagramGenerator.options = {
								diagramBreadCrumbsId : "diagramBreadCrumbs",
								diagramHolderId : "diagramHolder",
								diagramInfoId : "diagramInfo",
								on : {
									click : function(canvas, element,
											contextObject) {
										var mouseEvent = this;
										console
												.log(
														"[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o",
														mouseEvent, canvas,
														element, contextObject);

										if (contextObject.getProperty("type") == "callActivity") {
											var processDefinitonKey = contextObject
													.getProperty("processDefinitonKey");
											var processDefinitons = contextObject
													.getProperty("processDefinitons");
											var processDefiniton = processDefinitons[0];
											console
													.log(
															"Load callActivity '"
																	+ processDefiniton.processDefinitionKey
																	+ "', contextObject: ",
															contextObject);

											// Load processDefinition
											ProcessDiagramGenerator
													.drawDiagram(processDefiniton.processDefinitionId);
										}
									},
									rightClick : function(canvas, element,
											contextObject) {
										var mouseEvent = this;
										console
												.log(
														"[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o",
														mouseEvent, canvas,
														element, contextObject);
									},
									over : function(canvas, element,
											contextObject) {
										var mouseEvent = this;
										//console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

										// TODO: show tooltip-window with contextObject info
										ProcessDiagramGenerator
												.showActivityInfo(contextObject);
									},
									out : function(canvas, element,
											contextObject) {
										var mouseEvent = this;
										//console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

										ProcessDiagramGenerator.hideInfo();
									}
								}
							};

							var baseUrl = window.document.location.protocol
									+ "//" + window.document.location.host
									+ "/";
							var shortenedUrl = window.document.location.href
									.replace(baseUrl, "");
							baseUrl = baseUrl
									+ shortenedUrl.substring(0, shortenedUrl
											.indexOf("/"));

							ActivitiRest.options = {
								processInstanceHighLightsUrl : baseUrl
										+ "/service/process-instance/{processInstanceId}/highlights?callback=?",
								processDefinitionUrl : baseUrl
										+ "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
								processDefinitionByKeyUrl : baseUrl
										+ "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
							};

							if (processDefinitionId) {
								ProcessDiagramGenerator
										.drawDiagram(processDefinitionId);

							} else {
								alert("processDefinitionId parameter is required");
							}
						});
	</script>
</body>
</html>
